import React from 'react';
import { Card, Avatar, Tag, Space, Typography, Rate, Button } from 'antd';
import { HeartOutlined, HeartFilled, UserOutlined, ShoppingCartOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import dayjs from 'dayjs';

const { Title, Text } = Typography;

/**
 * 商品卡片组件
 * 
 * 功能：
 * - 展示商品基本信息
 * - 提供收藏功能
 * - 提供查看详情入口
 * - 根据商品状态显示不同标签
 * 
 * Props:
 * @param {Object} product - 商品数据对象
 * @param {Function} onFavorite - 收藏点击处理函数
 * @param {boolean} isFavorite - 是否已收藏
 * @param {boolean} showActions - 是否显示操作按钮
 */
const ProductCard = ({ product, onFavorite, isFavorite = false, showActions = true }) => {
  // 商品状态标签配置
  const statusConfig = {
    available: { color: 'green', text: '在售' },
    sold: { color: 'red', text: '已售出' },
    removed: { color: 'gray', text: '已下架' }
  };

  const status = statusConfig[product.status] || statusConfig.available;

  // 格式化日期
  const formattedDate = dayjs(product.created_at).format('YYYY-MM-DD');

  // 处理收藏点击
  const handleFavoriteClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (onFavorite) {
      onFavorite(product.id);
    }
  };

  return (
    <Card
      hoverable
      cover={
        <div className="product-image-container">
          <Link to={`/products/${product.id}`}>
            <img 
              alt={product.title} 
              src={product.images && product.images.length > 0 ? product.images[0].url : '/placeholder.jpg'}
              className="product-image"
            />
          </Link>
          {showActions && (
            <Button
              type="text"
              icon={isFavorite ? <HeartFilled /> : <HeartOutlined />}
              className={`favorite-button ${isFavorite ? 'favorited' : ''}`}
              onClick={handleFavoriteClick}
            />
          )}
        </div>
      }
      styles={{body: { padding: '12px' }}}
    >
      <Space direction="vertical" size={0} className="product-content">
        {/* 商品标题 */}
        <Link to={`/products/${product.id}`} className="product-title-link">
          <Title level={5} ellipsis={{ rows: 2 }} className="product-title">
            {product.title}
          </Title>
        </Link>
        
        {/* 商品价格 */}
        <div className="product-price">
          <Text strong className="price-value">¥{product.price}</Text>
          <Tag color={status.color} className="status-tag">{status.text}</Tag>
        </div>
        
        {/* 商品信息 */}
        <div className="product-info">
          <Space size="small">
            <Tag color="blue" className="condition-tag">{product.condition}</Tag>
            <Text type="secondary" className="location">{product.location}</Text>
          </Space>
        </div>
        
        {/* 卖家信息 */}
        <div className="product-seller">
          <Space size="small" align="center">
            <Avatar 
              size="small" 
              icon={<UserOutlined />}
            />
            <Text type="secondary" className="seller-name">
              {product.seller?.username || '匿名卖家'}
            </Text>
            <Text type="secondary" className="publish-date">{formattedDate}</Text>
          </Space>
        </div>
        
        {/* 操作按钮 */}
        {showActions && product.status === 'available' && (
          <div className="product-actions">
            <Button 
              type="primary" 
              block 
              icon={<ShoppingCartOutlined />}
              className="buy-button"
            >
              立即购买
            </Button>
          </div>
        )}
      </Space>
    </Card>
  );
};

export default ProductCard;
